<!-- 审批 们的列表 -->
<template>
  <el-dialog v-model="dialogTableVisible" title="选择审批人" width="400" draggable destroy-on-close :show-close="false">
    <el-select v-model="sltValue" filterable clearable :remote-method="remoteMethod" placeholder="选择" size="large" style="width: 100%" @change="handleClickChange">
      <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" />
    </el-select>
    <template #footer>
      <el-button type="primary" @click="handleClickConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useProjectssStore, useUsersStore } from '../../stores'

const dialogTableVisible = ref<boolean>(false)
const optionsList = ref<any[]>([])

const props = defineProps({
  modelValue: {
    type: Object as any,
    default: null,
  },
  listType: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(['update:modelValue', 'closed'])

const sltValue = ref<any>(props.modelValue ? props.modelValue.id : null)
const options = ref<any[]>([])

watch(
  () => props.modelValue,
  (newVal) => {
    sltValue.value = newVal?.id ?? null
  }
)

const handleClickConfirm = () => {
  dialogTableVisible.value = false
}
const handleClickChange = () => {
  emit(
    'update:modelValue',
    options.value.find((item) => item.id == sltValue.value)
  )
  dialogTableVisible.value = false
}
/**
 * 打开对话框并初始化数据
 */
const openDialog = async () => {
  // sltValue.value = null
  dialogTableVisible.value = true
  switch (props.listType) {
    case 3: // 制片
      const list: any[] = []

      useProjectssStore()
        .getAllState()
        .forEach((item: any) => {
          if (item.configuration !== '{}') {
            const configuration = JSON.parse(item.configuration)
            if (Array.isArray(configuration)) {
              // console.log(configuration)
              const temp = configuration.map((item2: any) => {
                // console.log(item)
                return {
                  id: `${item.id}-${item2.userId}`,
                  text: item.cname,
                  value: item.code,
                  userId: item2.userId,
                  userName: item2.userName,
                  nickName: item2.userNick,
                  disabled: false,
                  label: `${item.cname}（${item.code}）:${item2.userNick}`,
                }
              })
              // console.log(temp)
              list.push(...temp)
            }
          } else {
            list.push({
              id: `${item.id}-${item.pmdUserId}`,
              text: item.cname,
              value: item.code,
              userId: item.pmdUserId,
              userName: item.pmdUserName,
              nickName: item.pmdUserNick,
              disabled: false,
              label: `${item.cname}（${item.code}）:${item.pmdUserNick}`,
            })
          }
        })
      options.value = list
      optionsList.value = Object.assign([], list)
      break
    case 2: // 总监
      options.value = useUsersStore().userApprovalList2.map(formatUserOption)
      break
    case 4: // 副总经理
      options.value = useUsersStore().userApprovalList108.map(formatUserOption)
      break
    case 5: // 总经理
      options.value = useUsersStore().userApprovalList109.map(formatUserOption)
      break
    default:
      options.value = useUsersStore().userApprovalList.map(formatUserOption)
      break
  }
}
const formatUserOption = (item: any) => ({
  id: item.userId,
  text: item.nickName,
  value: item.userName,
  userId: item.userId,
  userName: item.userName,
  nickName: item.nickName,
  disabled: false,
  label: `${item.nickName}（${item.userName}）`,
})
const remoteMethod = (query: string) => {
  if (props.listType === 3) {
    // 制片
    let list: any[] = []
    if (query) {
      list = optionsList.value.filter((item: any) => item.nickName.toLowerCase().includes(query.toLowerCase()) || item.code.toLowerCase().includes(query.toLowerCase()) || item.cname.toLowerCase().includes(query.toLowerCase()))
    }
    options.value = list
  } else if (props.listType === 2) {
    // 总监
    options.value = query
      ? useUsersStore()
          .userApprovalList2 // .filter((item: any) => item.userId != 113 && item.userId != 115 && item.userName.toLowerCase().includes(query.toLowerCase()) && item.nickName.toLowerCase().includes(query.toLowerCase()))
          .filter((item: any) => item.userName.toLowerCase().includes(query.toLowerCase()) && item.nickName.toLowerCase().includes(query.toLowerCase()))
          .map((item: any) => {
            return {
              id: item.userId,
              text: item.nickName,
              value: item.userName,
              userId: item.userId,
              userName: item.userName,
              nickName: item.nickName,
              disabled: false,
              label: `${item.nickName}（${item.userName}）`,
            }
          })
      : []
  } else {
    options.value = query
      ? useUsersStore()
          .userApprovalList // .filter((item: any) => item.userId != 113 && item.userId != 115 && item.userName.toLowerCase().includes(query.toLowerCase()) && item.nickName.toLowerCase().includes(query.toLowerCase()))
          .filter((item: any) => item.userName.toLowerCase().includes(query.toLowerCase()) && item.nickName.toLowerCase().includes(query.toLowerCase()))
          .map((item: any) => {
            return {
              id: item.userId,
              text: item.nickName,
              value: item.userName,
              userId: item.userId,
              userName: item.userName,
              nickName: item.nickName,
              disabled: false,
              label: `${item.nickName}（${item.userName}）`,
            }
          })
      : []
  }
}

defineExpose({ openDialog })
</script>
<style lang="scss" scoped></style>
